<template>
  <div>
    <div class="margin-top-sm">
      <el-button type="success" size="small" @click="handleClearForm"
        >添加</el-button
      >
    </div>
    <!-- dialog -->
    <el-dialog
      :title="form.id ? '编辑作品' : '添加作品'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <el-form ref="form" :model="form">
        <el-form-item label="作品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="作品链接">
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item label="作品描述">
          <el-input type="textarea" v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="作品图片(链接)">
          <el-input v-model="form.avatar"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="form.is_show"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="centerDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="handleDemoAdd">{{
          form.id ? "更新" : "添加"
        }}</el-button>
      </span>
    </el-dialog>
    <!-- table -->
    <div class="margin-top">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <a target="_blank" :href="scope.row.link" class="color-link">{{
              scope.row.name
            }}</a>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.avatar">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center">
          <template slot-scope="scope">
            {{ scope.row.describe }}
          </template>
        </el-table-column>
        <el-table-column label="添加时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.add_time | dateTimeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="是否展示" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              :active-value="1"
              :inactive-value="0"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="margin-top">
        <el-pagination
          @current-change="handlePageChange"
          background
          layout="prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  demoLinkList,
  demoLinkShow,
  demoLinkDelete,
  demoLinkAdd,
} from "@/api/link";
export default {
  data() {
    return {
      centerDialogVisible: false,
      list: [],
      form: {
        id: 0,
        name: "",
        link: "",
        describe: "",
        avatar: "",
        is_demo: 1,
        is_show: 0,
      },
      formParams: {
        page: 1,
        limit: 10,
        is_demo: 1,
      },
      count: 0,
      listLoading: true,
    };
  },
  created() {
    this.handleLoadData();
  },
  methods: {
    handleClearForm() {
      this.centerDialogVisible = true;
      this.form = {
        id: 0,
        name: "",
        link: "",
        describe: "",
        avatar: "",
        is_demo: 1,
        is_show: 0,
      };
    },
    handleChange(row) {
      let { id, is_show } = row;
      demoLinkShow({ id, is_show })
        .then((res) => {
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    handleDemoAdd() {
      this.centerDialogVisible = false;
      demoLinkAdd(this.form)
        .then((res) => {
          this.$message.success(res.msg);
          this.handleLoadData();
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    handleEdit(id) {
      let [current] = this.list.filter((current) => current.id == id);
      this.form = current;
      this.centerDialogVisible = true;
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该作品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          demoLinkDelete({ id })
            .then((res) => {
              this.$message.success(res.msg);
              this.handleLoadData();
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        })
        .catch(() => {});
    },
    // 加载数据
    handleLoadData() {
      this.listLoading = false;
      demoLinkList(this.formParams).then((res) => {
        console.log(res);
        this.count = res.data.count;
        this.list = res.data.data;
      });
    },
    //页数改变
    handlePageChange(index) {
      this.formParams.page = index;
      this.handleLoadData();
    },
  },
};
</script>
